<template>
  <div id="scrolling-form-con">
    <g-banner title="多节表单" des="用于字段较多的表单"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">多节表单</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
    </a-affix>
    <div class="g-box">
      <el-form :model="mission" label-width="120px" :rules="formRules" class="form-con" ref="form">
        <div class="g-form-block">
          <div class="g-form-title">任务基本信息</div>
          <div class="g-form-block-grid">
            <el-form-item label="是否现场支持" prop="isSupport">
              <el-radio label="0" v-model="mission.isSupport">是</el-radio>
              <el-radio label="1" v-model="mission.isSupport">否</el-radio>
            </el-form-item>
            <el-form-item label="支持地点" prop="position">
              <el-cascader v-model="mission.position" :options="regionOptions" placeholder="请选择支持地点" class="g-input-block"></el-cascader>
            </el-form-item>
            <el-form-item label="支持部门" prop="department">
              <el-select v-model="mission.department" placeholder="请选择支持部门" class="g-input-block">
                <el-option value="0" label="应用平台支持部"></el-option>
                <el-option value="1" label="空间大数据事业本部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务申请人" prop="applier">
              <el-input v-model="mission.applier" placeholder="请输入任务申请人" class="g-input-block"></el-input>
            </el-form-item>
          </div>
          <div class="g-form-block-grid">
            <el-form-item label="任务性质" prop="type">
              <el-radio label="0" v-model="mission.type">本地BUG修改</el-radio>
              <el-radio label="1" v-model="mission.type">其他</el-radio>
              <el-radio label="2" v-model="mission.type">研发</el-radio>
              <el-radio label="3" v-model="mission.type">支持</el-radio>
            </el-form-item>
            <el-form-item label="支持项目名称" prop="projectName">
              <el-select v-model="mission.projectName" filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="handleSearchOption" class="g-input-block">
                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支持行业线" prop="line">
              <el-input v-model="mission.line" placeholder="请输入支持行业线" class="g-input-block"></el-input>
            </el-form-item>
            <el-form-item label="批准人" prop="authorizor">
              <el-input v-model="mission.authorizor" placeholder="请输入批准人" class="g-input-block"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="g-form-block">
          <div class="g-form-title">任务工作量</div>
          <div class="g-form-block-grid">
            <el-form-item label="任务开始时间" prop="start">
              <el-date-picker v-model="mission.start" placeholder="请输入任务开始时间" class="g-input-block"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划工作量" prop="workload">
              <el-input-number v-model="mission.workload" placeholder="请输入计划工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">计划完成此任务的工作量</p>
            </el-form-item>
            <el-form-item label="加班工作量" prop="extraWork">
              <el-input-number v-model="mission.extraWork" placeholder="请输入加班工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">如无请填0，加班时间包含以下三种情况1.工作日8小时之外的 2.周末</p>
            </el-form-item>
          </div>
          <div class="g-form-block-grid">
            <el-form-item label="任务结束时间" prop="end">
              <el-date-picker v-model="mission.end" placeholder="请输入任务结束时间" class="g-input-block"></el-date-picker>
            </el-form-item>
            <el-form-item label="正常工作量" prop="normalWork">
              <el-input-number v-model="mission.normalWork" placeholder="请输入正常工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">完成此任务的工作量，不包含加班时间</p>
            </el-form-item>
          </div>
        </div>
        <div class="g-form-block">
          <div class="g-form-title">任务基本信息</div>
          <div class="g-form-block-grid">
            <el-form-item label="是否现场支持" prop="isSupport">
              <el-radio label="0" v-model="mission.isSupport">是</el-radio>
              <el-radio label="1" v-model="mission.isSupport">否</el-radio>
            </el-form-item>
            <el-form-item label="支持地点" prop="position">
              <el-cascader v-model="mission.position" :options="regionOptions" placeholder="请选择支持地点" class="g-input-block"></el-cascader>
            </el-form-item>
            <el-form-item label="支持部门" prop="department">
              <el-select v-model="mission.department" placeholder="请选择支持部门" class="g-input-block">
                <el-option value="0" label="应用平台支持部"></el-option>
                <el-option value="1" label="空间大数据事业本部"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务申请人" prop="applier">
              <el-input v-model="mission.applier" placeholder="请输入任务申请人" class="g-input-block"></el-input>
            </el-form-item>
          </div>
          <div class="g-form-block-grid">
            <el-form-item label="任务性质" prop="type">
              <el-radio label="0" v-model="mission.type">本地BUG修改</el-radio>
              <el-radio label="1" v-model="mission.type">其他</el-radio>
              <el-radio label="2" v-model="mission.type">研发</el-radio>
              <el-radio label="3" v-model="mission.type">支持</el-radio>
            </el-form-item>
            <el-form-item label="支持项目名称" prop="projectName">
              <el-select v-model="mission.projectName" filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="handleSearchOption" class="g-input-block">
                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支持行业线" prop="line">
              <el-input v-model="mission.line" placeholder="请输入支持行业线" class="g-input-block"></el-input>
            </el-form-item>
            <el-form-item label="批准人" prop="authorizor">
              <el-input v-model="mission.authorizor" placeholder="请输入批准人" class="g-input-block"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="g-form-block">
          <div class="g-form-title">任务工作量</div>
          <div class="g-form-block-grid">
            <el-form-item label="任务开始时间" prop="start">
              <el-date-picker v-model="mission.start" placeholder="请输入任务开始时间" class="g-input-block"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划工作量" prop="workload">
              <el-input-number v-model="mission.workload" placeholder="请输入计划工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">计划完成此任务的工作量</p>
            </el-form-item>
            <el-form-item label="加班工作量" prop="extraWork">
              <el-input-number v-model="mission.extraWork" placeholder="请输入加班工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">如无请填0，加班时间包含以下三种情况1.工作日8小时之外的 2.周末</p>
            </el-form-item>
          </div>
          <div class="g-form-block-grid">
            <el-form-item label="任务结束时间" prop="end">
              <el-date-picker v-model="mission.end" placeholder="请输入任务结束时间" class="g-input-block"></el-date-picker>
            </el-form-item>
            <el-form-item label="正常工作量" prop="normalWork">
              <el-input-number v-model="mission.normalWork" placeholder="请输入正常工作量"></el-input-number>
              &nbsp;<span>天</span>
              <p class="g-form-des">完成此任务的工作量，不包含加班时间</p>
            </el-form-item>
          </div>
        </div>
        <div class="g-form-block">
          <div class="g-form-title">任务详情</div>
          <div class="g-form-block-grid">
            <el-form-item label="任务描述" prop="des">
              <el-input type="textarea" v-model="mission.des" :rows="5" placeholder="请输入任务描述" class="g-input-block"></el-input>
            </el-form-item>
          </div>
          <div class="g-form-block-grid">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="mission.remark" :rows="5" placeholder="请输入备注" class="g-input-block"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { regionOptions } from '@/data/data'
import { getFormOptionList } from '@/api/form'
import { getScrollingCon } from '@/util/common'

export default {
  data() {
    return {
      mission: {
        isSupport: '0',
        position: [],
        department: null,
        applier: '',
        type: '0',
        projectName: '',
        line: '',
        authorizor: '',

        start: '',
        workload: 0,
        extraWork: 0,
        end: '',
        normalWork: 0,

        des: '',
        remark: ''
      },
      regionOptions,
      projectData: [],
      formRules: {
        isSupport: [
          { required: true, message: '请输入是否现场支持', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入选择支持部门', trigger: 'blur' }
        ],
        applier: [
          { required: true, message: '请输入任务申请人', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入任务性质', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入支持项目名称', trigger: 'blur' }
        ],
        line: [
          { required: true, message: '请输入支持行业线', trigger: 'blur' }
        ],
        authorizor: [
          { required: true, message: '请输入批准人', trigger: 'blur' }
        ],
        start: [
          { required: true, message: '请输入任务开始时间', trigger: 'blur' }
        ],
        workload: [
          { required: true, message: '请输入计划工作量', trigger: 'blur' }
        ],
        extraWork: [
          { required: true, message: '请输入加班工作量', trigger: 'blur' }
        ],
        end: [
          { required: true, message: '请输入任务结束时间', trigger: 'blur' }
        ],
        normalWork: [
          { required: true, message: '请输入正常工作时间', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleSearchOption(query) {
      if (query == '') {
        this.projectData = []
      } else {
        getFormOptionList(query).then((result) => {
          this.projectData = result.data.array.filter((item) => {
            return item.name.indexOf(query) > -1
          })
        })
      }
    },
    handleSubmit() {
      this.$refs.form.validate((isValid)=>{
        if(isValid) {
          this.$message.success('提交成功')
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    getScrollingCon,
    handlePreventHistory(e, link) {
      e.preventDefault()
    },
  },
}
</script>